<template>
    <div class="page-content-normal">
        <header class="main-header">
            <div class="main-header-section">
                <div class="main-header-left" v-if="isShowBack">
                    <img id="backBtn" src="@/assets/images/ic_back@3.png" @click="BackClick" draggable="false" />
                </div>
                <div class="main-header-center" :style="centerStyle">
                    <h1 id="title">{{ title }}</h1>
                </div>
                <div v-if="isShowSwitch" class="main-header-right">
                    <label :id="labelId" for="swtch">
                        <el-switch v-preventReClick="preventReTime" :id="switchId" v-model="initSwitchValue" @change="ClickSwitch" :disabled="switchDisaBled"> </el-switch>
                    </label>
                </div>
            </div>
        </header>

        <section class="tips" v-if="tips">{{ tips }}</section>

        <section v-if="isShowLine"><el-divider /></section>
    </div>
</template>

<script>
import watchWindow from '@/hooks/watchWindow';
export default {
    extends: watchWindow,
    name: '',
    props: {
        // 标题
        title: {
            type: String,
            required: true
        },
        // 是否需要 switch
        isShowSwitch: {
            type: Boolean,
            default: false
        },
        // Switch 绑定的值
        switchValue: {
            type: [String, Boolean, Number],
            default: false
        },
        // Switch 是否禁用
        switchDisaBled: {
            type: Boolean,
            default: false
        },
        // Label 标签 ID
        labelId: {
            type: [String, undefined],
            default: undefined
        },
        // Switch 标签 ID
        switchId: {
            type: [String, undefined],
            default: 'titleSwitch'
        },
        // 是否需要分割线
        isShowLine: {
            type: Boolean,
            default: false
        },
        // 是否需要返回开关
        isShowBack: {
            type: Boolean,
            default: false
        },
        // 禁止点击的时间
        preventReTime: {
            type: Number,
            default: 1000
        },
        // 自动布尔值换算
        isAutoBol: {
            type: Boolean,
            default: true
        },
        // 提示信息
        tips: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            initSwitchValue: this.switchValue
        };
    },
    methods: {
        // 点进返回触发的方法
        BackClick() {
            this.$emit('BackClick');
        },
        // 点击 Switch 触发的方法
        ClickSwitch() {
            this.$emit('UpdateSwitch', this.initSwitchValue);
            this.$emit('ClickSwitch', this.initSwitchValue);
        }
    },
    computed: {
        // 标题样式，超出 25 字时调整字体大小
        centerStyle() {
            return this.$nextTick(() => {
                if (this.windowSize.width <= 414 && this.title.length >= 25) {
                    return { fontSize: '0.5em !important', maxWidth: `${this.windowSize.width}px` };
                } else if (this.title.length >= 25) {
                    return { fontSize: '0.65em !important', maxWidth: '627px' };
                } else {
                    return {};
                }
            });
        }
    },
    watch: {
        switchValue(nval) {
            let bolValue = nval;
            if (this.isAutoBol) {
                if (typeof nval === 'string' || typeof nval === 'number') {
                    const toNumValue = Number(nval);
                    bolValue = toNumValue == 1;
                }
            }
            this.initSwitchValue = bolValue;
        }
    }
};
</script>

<style lang="less" scoped>
@import '@/assets/css/theme_blue/component_common.less';
.main-header {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 83px;
    background-color: @light-bg-primary;
    margin: 0 auto;
    transition: @theme-transition;

    .main-header-section {
        display: flex;
        align-items: center;
        width: 100%;
        .main-header-left {
            margin-right: 15px;
            display: flex;
            align-items: center;

            img {
                width: 50px;
                height: 50px;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
        }

        .main-header-center {
            flex-grow: 1;
            overflow: hidden;
            word-wrap: break-word;
            h1 {
                font-size: 22px;
                color: @light-text-primary;
                transition: @theme-transition;
            }
        }

        @media (max-width: 414px) {
            .main-header-left {
                margin-right: 5px;
            }
        }
    }
}

.tips {
    color: @light-text-muted;
    margin-top: 10px;
    transition: @theme-transition;
}

// 暗模式样式
.theme-dark {
    .main-header {
        background-color: @dark-bg-secondary !important;
        
        .main-header-center {
            h1 {
                color: @dark-text-primary !important;
            }
        }
    }
    
    .tips {
        color: @dark-text-muted !important;
    }
}
</style>
